<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link href="day02.css" rel="stylesheet" type="text/css" />
		<script src="js/indexlunbotu.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#main{
				width: 100%;
				background-color: lightpink;
				background-image: url(img/lunbo/1920-1080.jpg);
				height: 740px;
				border: 1 lightgray;
				
			}
			#xx{
				height: 555px;
				background-size: 90%;
				background-color: white;
				margin: auto;
				
			}
			button{
				border-radius: 50%;
				width: 20px;
				height: 20px;
				border: none;
				background-color: white;
			}
			button:hover{
				background-color: gray;
				cursor: pointer;
			}
			#btn_div{
				position: absolute;
				left: 47%;
				top: 520px;
			
			}
		</style>
	</head>
	<body>
		<div id = "main" align="center">
			
			<div id="xx">
				<div id ="btn_div">
					<button onclick="change1()" id ="btn1"> 1</button>
					<button onclick="change2()" id ="btn2"> 2</button>
					<button onclick="change3()" id ="btn3"> 3</button>
					<button onclick="change4()" id ="btn4"> 4</button>
				</div>
			</div>
		</div>
		
		
	</body>
</html>
